<template>
    <div>
        <div class="head_wrap">
            <div style="display: flex;align-items: center;">
                <icon-lark-color style="font-size: 32;" />
                <span style="font-size: 18px;margin-left:10px;font-weight: 500;">集群控制台</span>
            </div>
            <div>
                <a-dropdown @select="handleSelect" :popup-max-height="false" size="mini" trigger="hover">
                    <a-button size="small" type="text">{{ userInfo.nickname }} <icon-down /></a-button>
                    <template #content>
                        <a-doption value="logout">注销登录</a-doption>
                    </template>
                </a-dropdown>
            </div>
        </div>
        <div class="main_wrap">
            <div class="menu_wrap" :style="collapsed ? 'width:48px' : 'width:200px'">
                <a-menu :auto-open="true" class="menu_box" :style="{ width: '200px', height: '100%' }"
                    :default-open-keys="['0']" :level-indent="29" style="background-color: #f7f8fa;"
                    :default-selected-keys="menuSelect" show-collapse-button breakpoint="xl" @collapse="onCollapse"
                    @menu-item-click="onMenuClick">
                    <a-menu-item key="/service/home">
                        <icon-common style="font-size: 14;" />
                        <span>系统概览</span>
                    </a-menu-item>
                    <a-sub-menu key="0">
                        <template #icon><icon-settings style="font-size: 14;" /></template>
                        <template #title>服务配置</template>
                        <a-menu-item key="/service/dispatcher">节点管理</a-menu-item>
                        <a-menu-item key="/service/sipaccount">坐席账号</a-menu-item>
                    </a-sub-menu>
                    <a-sub-menu key="1">
                        <template #icon><icon-safe style="font-size: 14;" /></template>
                        <template #title>安全组配置</template>
                        <a-menu-item key="/service/whitelist">白名单配置</a-menu-item>
                        <a-menu-item key="/service/command">命令配置</a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </div>
            <div class="right_wrap" :style="collapsed ? 'margin-left:48px' : 'margin-left:200px'">
                <div class="main_content_wrap">
                    <a-watermark content="">
                        <router-view></router-view>
                    </a-watermark>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue';
import http from '../utils/request'
import { Modal } from '@arco-design/web-vue';
import Cookies from 'js-cookie';
export default {
    data() {
        return {
            collapsed: false,
            menuSelect: [],
            userInfo: {}
        }
    },
    mounted() {
        this.initMenuSelect();
        this.getUser();
    },
    methods: {
        initMenuSelect() {
            this.menuSelect.push(this.$route.path)
        },
        onCollapse(val, type) {
            this.collapsed = val
        },
        onMenuClick(key) {
            this.$router.push({ path: key })
        },
        getUser() {
            http.get('/api/user/getUserInfo').then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    this.$message.error(res.msg);
                    return
                }
                this.userInfo = res.data;
            }).catch(() => { })
        },
        handleSelect(v) {
            var that = this;
            if (v == 'logout') {
                Modal.open({
                    title: '系统提示',
                    content: '是否注销登录？',
                    draggable: true,
                    onOk: () => {
                        http.get('/api/logout').then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                that.$message.error(res.msg);
                                return
                            }
                            Cookies.remove('token');
                            Cookies.remove('menuId');
                            that.$router.push({ path: '/' }).catch(err => err)
                        }).catch(() => { })
                    },
                    onCancel: () => {
                        console.log('Cancel');
                    },
                });
            }
        }
    }
}
</script>
<style scoped>
.head_wrap {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    -webkit-app-region: drag;
    background-color: #fff;
    color: #323639;
    border-bottom: 1px solid #e5e6ed;
    padding: 0 20px 0 20px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
}

.main_wrap {
    margin-top: 50px;
}

.menu_wrap {
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    background-color: #fff;
    overflow-y: auto;
    z-index: 200;
    overflow-x: hidden;
    background-color: #f7f8fa;
    padding-top: 6px;
    /* border-right: 1px solid #f0f0f0; */
}

.right_wrap {
    background-color: #fff;
    position: relative;
    height: calc(100vh - 50px);
}

.main_content_wrap {
    padding: 16px;
    height: calc(100vh - 82px);
    overflow-y: auto;
}

.arco-dropdown-open .arco-icon-down {
    transform: rotate(180deg);
}
</style>